//全页面高度
.page-h-full {
  height: 100vh;
}

// 页面background
.bg-lg-blue {
  background: linear-gradient(#3779f5 25%, #f2f1f6 80%);
}

//无数据
@mixin nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(107, 107, 107, 1);
}

.page-content-nodata {
  @include nodata;
  height: 500px;
  font-size: 18px;
}

.page-content-nodata-thin {
  @include nodata;
  height: 100px;
}

//bg 白色、 padding 12
.page-bw-p12 {
  padding: 12px;
  background-color: #ffffff;
}

//固定的头部 如分页导航，搜索等
.page-fixed-header {
  position: fixed;
  height: 42px;
  top: 0;
}

//固定的头部 以下的内容
.page-fixed-header + view {
  margin-top: 63px;
}

//底部固定工具栏
.bottom-toolsbar {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background-color: #fff;
}

.bottom-toolsbar-border-thin {
  display: flex;
  justify-content: space-around;
  padding: 8px;
  background-color: #fff;
}

//底部固定框
.page-bottom-fix {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}

//底部悬浮按钮
.page-float-bottom-btn {
  position: fixed;
  right: 16px;
  bottom: 40px;

  img {
    // width: 120px;
    height: 48px;
  }
}

//h25 的按钮
@mixin btn-h-25 {
  height: 25px;
  border-radius: 12.5px;
  font-size: 12px;
  color: #ffffff;
  line-height: 25px;
  text-align: center;
}

//w50 h25 的按钮
.btn-50-25 {
  @include btn-h-25;
  width: 50px;
}

//h40 的按钮
@mixin btn-h-40 {
  height: 40px;
  border-radius: 20px;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}

//w80 h40 的按钮
.btn-80-40 {
  @include btn-h-40;
  width: 80px;
}

//w90 h40 的按钮
.btn-90-40 {
  @include btn-h-40;
  width: 90px;
}

//w100 h40 的按钮
.btn-100-40 {
  @include btn-h-40;
  width: 100px;
}

//w110 h40 的按钮
.btn-110-40 {
  @include btn-h-40;
  width: 110px;
}

//w120 h40 的按钮
.btn-120-40 {
  @include btn-h-40;
  width: 120px;
}

//w140 h40 的按钮
.btn-140-40 {
  @include btn-h-40;
  width: 140px;
}

//w140 h40 的按钮
.btn-160-40 {
  @include btn-h-40;
  width: 160px;
}

// 按钮默认样式
.btn-default {
  color: #6b6b6b;
  background-color: #f2f6fa;
}

.btn-default-border {
  color: #6b6b6b;
  border: 1px solid #6b6b6b;
}

// picker-view
@mixin picker-view {
}

.picker-view-h-300 {
  @include picker-view;
  height: 300px;
}

@mixin picker-view-item {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.picker-view-item-h-34 {
  @include picker-view-item;
  height: 34px;
}

// 图片
.img-14 {
  width: 14px;
  height: 14px;
}

.img-16 {
  width: 16px;
  height: 16px;
}

.img-20 {
  width: 20px;
  height: 20px;
}

.img-24 {
  width: 24px;
  height: 24px;
}

.img-28 {
  width: 28px;
  height: 28px;
}

.img-40 {
  width: 40px;
  height: 40px;
}

.img-48 {
  width: 48px;
  height: 48px;
}

.img-56 {
  width: 56px;
  height: 56px;
}

.img-72 {
  width: 72px;
  height: 72px;
}

.img-80 {
  width: 80px;
  height: 80px;
}

.img-160 {
  width: 160px;
  height: 160px;
}

//头像
@mixin size-48 {
  width: 48px;
  height: 48px;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin img-40-green {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(39, 153, 92, 1);
}

.avatar-48-green-border {
  @include flex-center;
  @include size-48;
  margin-right: 8px;

  img {
    @include img-40-green;
  }
}

.avatar-48-green-border-right {
  @include flex-center;
  @include size-48;
  margin-left: 8px;

  img {
    @include img-40-green;
  }
}

// 文本
@mixin text-space {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
}

//（单行）
.line-text-space {
  @include text-space;
  -webkit-line-clamp: 1;
}

//（两行）
.two-line-text-space {
  @include text-space;
  -webkit-line-clamp: 2;
}

//（三行）
.thr-line-text-space {
  @include text-space;
  -webkit-line-clamp: 3;
}

// 图片删除的按钮
.icon-del-img {
  width: 20px;
  height: 20px;
  border-radius: 12px;
  background: rgba(146, 146, 146, 0.8);
  position: absolute;
  right: -6px;
  top: -6px;
}
